<template>
    <div class="shareInfo">
      <nav-bar :path="path"></nav-bar>
      <div class="content">
        <h3>{{info.title}}</h3>
        <ul class="other">
          <li class="item1">{{info.create_at | formatTime}}</li>
          <li class="item2"><i class="iconfont">&#xe644;</i></li>
          <li class="item3">{{info.read}}</li>
          <li class="item2"><i class="iconfont">&#xe638;</i></li>
          <li class="item3">{{info.star}}</li>
        </ul>
        <div class="txt" v-html="info.content">
        </div>
      </div>
      <div class="inline"></div>
      <div class="comment">
        <div class="comment-title">
          评论
          <span>{{sum}}</span>
        </div>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
        <div class="comment-content" v-for="(item,index) in list" :key="index">
          <div class="comment-item">
            <img class="item1" v-if="item.author.avatar" :src="$baseUrl + item.author.avatar" alt="">
            <img class="item1" v-else src="@/assets/logo.png" alt="">
            <div class="item2">
              <div class="name">{{item.author.nickname}}</div>
              <div class="time">{{item.created_at | formatTime}}</div>
            </div>
            <div class="item3">
                {{item.star}} <i class="iconfont">&#xe639;</i>
            </div>
          </div>
          <div class="comment-text"  @click="showPopup('回复：'+item.author.nickname,item.id)">{{item.content}}</div>
          <div class="recomment" v-for="(item2,index2) in item.children_comments" :key="index2">
            <div class="left">{{item2.author}}:</div>
            <div class="right">{{item2.content}}</div>
          </div>
        </div>
        </van-list>
      </div>
      <div class="footer">
        <ul class="item-list">
          <li class="i1" @click="showPopup('我来补充两句','')">我来补充两句</li>
          <li class="i2">
            <div class="iconfont">&#xe649;</div>
            <p>323</p>
          </li>
          <li class="i2">
            <div class="iconfont">&#xe650;</div>
            <p>323</p>
          </li>
          <li class="i2">
            <div class="iconfont">&#xe63e;</div>
            <p>323</p>
          </li>
        </ul>
      </div>
      <van-popup v-model="show" position="bottom" :style="{height:'30%'}" class="popup">
        <van-field
          class="field"
          v-model="message"
          rows="3"
          autosize
          type="textarea"
          maxlength="50"
          :placeholder="placeholder"
          show-word-limit
        />
        <div class="send" v-if="message.trim().length === 0">发送</div>
        <div class="send" v-else @click="sendComments" :style="{color: '#e40137'}">发送</div>
      </van-popup>
    </div>
</template>

<script>
import navBar from '@/components/navBar'
import { articlesShareId, articlesCommentsId, articlesComments } from '@/api/find'

export default {
  components: {
    navBar
  },
  name: 'shareInfo',
  data () {
    return {
      id: this.$route.params.id,
      path: this.$route.query.path,
      info: [],
      loading: false,
      finished: false,
      currentPage: 1,
      pageSize: 3,
      list: [],
      sum: 0, // 评论条数
      show: false,
      message: '', // 评论内容
      placeholder: '', // 提示信息
      parent: '' // 被回复的id
    }
  },
  async created () {
    const res = await articlesShareId(this.id)
    this.info = res.data.data
    // console.log(res)
  },
  methods: {
    async onLoad () {
      const res = await articlesCommentsId(this.id, {
        start: (this.currentPage - 1) * this.pageSize,
        limit: this.pageSize
      })
      this.sum = res.data.data.total
      this.list.push(...res.data.data.list)
      this.currentPage++
      this.loading = false
      console.log(this.list)
      if (this.list.length >= res.data.data.total) {
        this.finished = true
      }
    },
    /**
     * 弹出popup框
     * @param hint 提示信息
     * @param id    被回复评论id
     */
    showPopup (hint, id) {
      this.show = true
      this.placeholder = hint
      this.parent = id
    },
    /**
     * 发送评论
     * @returns {Promise<void>}
     */
    async sendComments () {
      const res = await articlesComments({
        content: this.message,
        article: this.id,
        parent: this.parent
      })
      // 如果parent有值就是发送评论,否则回复评论
      if (this.parent === '') {
        res.data.data.star = 0 // 给data对象添加star属性赋值为0
        this.list.unshift(res.data.data) // 将新添加的评论添加到数组首位
      } else {
        // 循环数组
        this.list.forEach(item => {
          // 如果评论的ID 等于 回复评论接口的返回值的parent
          if (item.id === res.data.data.parent) {
            // 将返回数据添加到该条评论下
            item.children_comments.push(res.data.data)
          }
        })
      }
      this.message = ''
      this.show = false
      console.log(res)
    }
  }
}
</script>

<style lang="less" scoped>
  .shareInfo {
    .content {
      padding: 0 @p15;
      margin-top: 19px;
      h3 {
        margin-bottom: 9px;
        font-size: 18px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 500;
        text-align: left;
        color: #181a39;
        line-height: 25px;
      }
      .other {
        display: flex;
        margin-bottom: 28px;
        li {
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 17px;
          letter-spacing: 0px;
        }
        .item1 {
          flex: 1;
        }
      }
      .txt {
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: justify;
        color: #181a39;
        line-height: 27px;
        letter-spacing: 0px;
      }
      ::v-deep img {
        width: 100%;
      }
    }
    .inline {
      height: 11px;
      background-color: #f7f4f5;
    }
    .comment {
      padding: 25px @p15 80px;
      .comment-title {
        font-size: 18px;
        margin-bottom: 30px;
        font-family: PingFangSC, PingFangSC-Medium;
        font-weight: 600;
        text-align: left;
        color: #222222;
        line-height: 25px;
        letter-spacing: 0px;
        position: relative;
        span {
          position: absolute;
          top: -5px;
          left: 40px;
          font-size: 12px;
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          text-align: left;
          color: #b4b4bd;
          line-height: 17px;
          letter-spacing: 0px;
        }
      }
      .comment-content {
        margin-bottom: 30px;
        word-wrap: break-word;
        word-break: break-all;
        .comment-item {
          display: flex;
          align-items: center;
          .item1 {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            margin-right: 10px;
          }
          .item2 {
            flex: 1;
            .name {
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Semibold;
              font-weight: 600;
              text-align: left;
              color: #545671;
              line-height: 17px;
              letter-spacing: 0px;
            }
            .time {
              font-size: 12px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              text-align: left;
              color: #b4b4bd;
              line-height: 17px;
              letter-spacing: 0px;
            }
          }
          .item3 {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: right;
            color: #b4b4bd;
            line-height: 17px;
            letter-spacing: 0px;
            i {
              font-size: 24px;
              vertical-align: top;
            }
          }
        }
        .comment-text {
          margin-left: 45px;
          padding: 10px 0;
          font-size: 16px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: justify;
          color: #181a39;
          line-height: 27px;
          letter-spacing: 0px;
        }
        .recomment {
          display: flex;
          padding: 15px;
          margin-left: 45px;
          background: #f7f4f5;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Semibold;
          text-align: left;
          line-height: 20px;
          letter-spacing: 0px;
          .left {
            font-weight: 600;
            color: #545671;
            margin-right: 10px;
          }
          .right {
            flex: 1;
            font-weight: 500;
            color: #6b6d84;
          }
        }
      }
    }
    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      .item-list {
        padding: @p15;
        display: flex;
        align-items: center;
        .i1 {
          flex: 1;
          width: 180px;
          padding: 7px 0 7px 10px;
          background: #f7f4f5;
          border-radius: 4px;
          font-size: 14px;
          font-family: PingFangSC, PingFangSC-Regular;
          font-weight: 400;
          text-align: left;
          color: #b4b4bd;
          line-height: 20px;
          letter-spacing: 0px;
        }
        .i2 {
          margin-left: 25px;
            color: #b4b4bd;
          div {
            font-size: 28px;
          }
          p {
            font-size: 12px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: center;
            line-height: 17px;
            letter-spacing: 0px;
          }
        }
      }
    }
    .popup {
      padding: 25px 15px 0;
      .field {
        caret-color:#00B8D4;
        background: #f7f4f5;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: left;
        color: #181a39;
        line-height: 20px;
        letter-spacing: 0px;
        ::v-deep .van-field__word-limit {
          color: #ccc;
        }
      }
      .send {
        padding: 11px 0;
        font-size: 16px;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        text-align: right;
        color: #b4b4bd;
        line-height: 23px;
        letter-spacing: 0px;
      }
    }
  }
</style>
